<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var doc = document.documentElement;
    var viewport = document.querySelector('meta[name="viewport"]')
    var dpr = window.devicePixelRatio || 1;
    var maxWidth = 540;
    var minWidth = 320;
    if(dpr>=3){
      dpr=3
    }else if(dpr>=2){
      dpr=2
    }else{
      dpr=1
    }
    
    doc.setAttribute('data-dpr', dpr)
    doc.setAttribute('maxWidth', maxWidth)
    doc.setAttribute('minWidth', minWidth)
    var scale = 1 / dpr;
    var content =
      `width=device-width,initial-scale=${scale},user-scalable=no,maximum-scale=${scale},minimum-scale=${scale}`
    if (viewport) {
      viewport.setAttribute('content', content)
    } else {
      viewport = document.createElement('meta')
      viewport.setAttribute('name', 'viewport')
      viewport.setAttribute('content', content)
1
      document.head.append(viewport)
    }
    setRemUnit()
    window.addEventListener('resize', setRemUnit)

    function setRemUnit() {
      var ratio = 18.75;
      var viewWidth = doc.getBoundingClientRect().width || window.innerWidth
      console.log(viewWidth);
      if (maxWidth && (viewWidth / dpr > maxWidth)) {
        viewWidth = maxWidth * dpr
      } else if (minWidth && (viewWidth / dpr < minWidth)) {
        viewWidth = minWidth * dpr
      }
      doc.style.fontSize = viewWidth / ratio + 'px'
    }
  </script>
</body>

</html>